* {
    margin: 0;
    padding: 0;
    list-style: none;
    user-select: none;
}

.box {
    width: 100%;
    height: 88.4vh;
    user-select: none;

    .Communityheader {
        width: 99%;
        height: 5vh;
        margin-left: 1%;

        .CommunityheaderOne {
            width: 6vw;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 0.5vw;
            cursor: pointer;

            li {
                width: 2.2vw;
                height: 2.7vh;
                line-height: 2.7vh;
                text-align: center;
            }
        }
    }

    .CommunityMain {
        width: 99%;
        height: 77vh;
        margin-left: 1%;

        .CommunityMainTow {
            width: 99%;
            height: 8vh;
            border-left: 0.5vw solid #009688;
            display: flex;

            .CommunityMainTowA {
                width: 10vw;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;
            }

            .CommunityMainTowB {
                width: 8vw;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin-left: 2vw;
            }

            .CommunityMainTowC {
                width: 23vw;
                height: 100%;
                margin-left: 2vw;
                display: flex;
                align-items: center;
                justify-content: space-around;
            }
        }
    }

    .CommunityFoot {
        width: 99%;
        height: 3vw;
        margin-left: 1%;
        border-top: 1px solid #ccc;

        .CommunityFootA {
            width: 20vw;
            height: 100%;
            display: flex;
            align-items: center;

            button {
                width: 3vw;
                height: 5vh;
                background-color: #ff5722;
                border: none;
                color: #fff;
                border-radius: 0.3vw;
                text-align: center;
                line-height: 5vh;
                transition: opacity 0.5s ease;
            }

            button:hover {
                opacity: 0.8;
            }
        }
    }
}

.Communityactive {
    width: 2.2vw;
    height: 2.7vh;
    line-height: 2.7vh;
    text-align: center;
    background-color: #009688;
    border-radius: 0.2vw;
    color: #fff;
    font-size: 0.5vw;
}

.CommunityactiveAdd {
    height: calc(100% - 2px);
    line-height: 8.2vh;
    color: #00c0ef;
    font-size: 1vw;
    border-bottom: 2px solid #00c0ef;
}

.Communitytab {
    display: none;
    width: 100%;
    height: 77vh;

    .tabBox {
        width: 98%;
        height: 69vh;
        overflow-y: auto;

        .table {
            width: 100%;
            border: 1px solid #f2f2f2;

            thead {
                background-color: #f2f2f2;
            }

            td {
                overflow: hidden;
                border: 1px solid #f2f2f2;
                text-align: center;
                height: 4vh;
                line-height: 5vh;
                font-size: 1vw;
                color: #333333;
            }

            tbody {
                tr {
                    height: 3vh;

                    td {
                        height: 3vh;


                    }
                }
            }








            .bb {
                width: 2vw;
                height: 2.5vh;
                color: #fff;
                font-size: 0.5vw;
                border: none;
                background-color: #009688;
                cursor: pointer;
                margin-left: 0.5vw;
                border-radius: 12%;
            }

            .dell {
                width: 2vw;
                height: 2.5vh;
                color: #fff;
                font-size: 0.5vw;
                border: none;
                background-color: red;
                cursor: pointer;
                margin-left: 0.5vw;
                border-radius: 12%;
            }



        }
    }
}

.CommunitytabAdd {
    width: 100%;
    height: 75.4vh;
    display: none;
    overflow-y: auto;

    .CommunitytabAddOne {
        width: 98%;
        height: 8vh;
        margin-left: 2%;

        .divOne {
            width: 20vw;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
    }

    .CommunitytabAddTow {
        width: 98%;
        height: 8vh;
        margin-left: 2%;

        .divTow {
            width: 55vw;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            justify-content: space-between;

            .divTowA,
            .divTowB {
                width: 25.5vw;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;
            }

            input {
                border: none;
                outline: none;
                width: 20vw;
                height: 5vh;
                text-indent: 1em;
                border: 1px solid #ccc;
            }
        }
    }

    .CommunitytabAddThird {
        width: 98%;
        height: 8vh;
        margin-left: 2%;

        .divThird {
            width: 55.5vw;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            justify-content: space-between;

            .divThirdA {
                width: 25.5vw;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;
            }

            .divThirdB {
                width: 26vw;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;

                button {
                    background-color: #009688;
                    color: #fff;
                    width: 5vw;
                    height: 5vh;
                    line-height: 5vh;
                    text-align: center;
                    border: none;
                    cursor: pointer;
                    transition: opacity 0.5s ease;
                }

                button:hover {
                    opacity: 0.8;
                }
            }

            .divThirdBInput {
                border: none;
                outline: none;
                width: 15vw;
                height: 5vh;
                text-indent: 1em;
                border: 1px solid #ccc;
            }

            input {
                border: none;
                outline: none;
                width: 20vw;
                height: 5vh;
                text-indent: 1em;
                border: 1px solid #ccc;
            }
        }
    }

    .CommunitytabAddFour {
        width: 98%;
        height: 8vh;
        margin-left: 2%;

        .divFour {
            width: 27vw;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            p:nth-child(3) {
                color: #999999;
            }
        }

        input {
            border: none;
            outline: none;
            width: 20vw;
            height: 5vh;
            text-indent: 1em;
            border: 1px solid #ccc;
        }
    }

    .CommunitytabAddFive {
        width: 98%;
        height: 8vh;
        margin-left: 2%;

        .divFive {
            width: 25vw;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
    }

    .CommunitytabAddSix {
        width: 98%;
        height: 18vh;
        margin-left: 2%;
        margin-top: 2vh;

        .divSix {
            width: 95%;
            height: 100%;
            display: flex;
            justify-content: space-around;

            .wby {
                width: 75.5vw;
                height: 17vh;
                border: none;
                outline: none;
                text-indent: 1em;
                border: 1px solid #ccc;
            }
        }
    }

    .CommunitytabAddSeven {
        width: 98%;
        height: 8vh;
        margin-left: 2%;
        margin-top: 2vh;

        .divSeven {
            width: 10vw;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            button {
                width: 6vw;
                height: 6vh;
                background-color: #009688;
                border: none;
                cursor: pointer;
                color: #fff;
                border-radius: 2vw;
                line-height: 6vh;
                text-align: center;
                cursor: pointer;
                transition: opacity 0.5s ease;
            }

            button:hover {
                opacity: 0.8;
            }
        }
    }

    .CommunitytabAddEight {
        width: 98%;
        height: 8vh;
        margin-left: 2%;
        margin-top: 2vh;

        .divEight {
            width: 10vw;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            button {
                width: 6vw;
                height: 6vh;
                background-color: #009688;
                border: none;
                cursor: pointer;
                color: #fff;
                border-radius: 2vw;
                line-height: 6vh;
                text-align: center;
                transition: opacity 0.5s ease;
            }

            button:hover {
                opacity: 0.8;
            }
        }
    }

    .CommunitytabAddNine {
        width: 98%;
        height: 8vh;
        margin-left: 2%;

        .divNine {
            width: 47vw;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            input {
                border: none;
                outline: none;
                width: 40vw;
                height: 5vh;
                text-indent: 1em;
                border: 1px solid #ccc;
            }
        }
    }

    .CommunitytabAddTen {
        width: 98%;
        height: 75vh;
        margin-left: 2%;
        margin-top: 2vh;

        .divTen {
            width: 66%;
            height: 100%;
            display: flex;
            justify-content: space-between;

            img {
                width: 50vw;
                height: 74vh;
            }
        }
    }

    .CommunitytabAddtj {
        width: 98%;
        height: 8vh;
        margin-left: 2%;

        button {
            width: 10vw;
            height: 6vh;
            background-color: #009688;
            border: none;
            cursor: pointer;
            color: #fff;
            border-radius: 2vw;
            margin-left: 5vw;
            line-height: 6vh;
            text-align: center;
            transition: opacity 0.5s ease;
        }

        button:hover {
            opacity: 0.8;
        }
    }

    .CommunitytabAddTowOne {
        width: 98%;
        height: 8vh;
        margin-left: 2%;

        .divTowOne {
            width: 55vw;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            justify-content: space-between;

            .divTowOneA,
            .divTowOneB {
                width: 25.5vw;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;
            }

            input {
                border: none;
                outline: none;
                width: 20vw;
                height: 5vh;
                text-indent: 1em;
                border: 1px solid #ccc;
            }
        }
    }

    .CommunitytabAddTowTow {
        width: 98%;
        height: 8vh;
        margin-left: 2%;
        display: flex;
        align-items: center;

        p {
            font-weight: 800;
            font-size: 1.5vw;
        }

        span {
            font-weight: 100;
            font-size: 1.5vw;
        }

        .span {
            color: #ccc;
        }
    }

    .CommunitytabAddTowThird {
        width: 98%;
        height: 8vh;
        margin-left: 2%;

        .divTowThird {
            width: 95%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            input {
                border: none;
                outline: none;
                width: 75vw;
                height: 5vh;
                text-indent: 1em;
                border: 1px solid #ccc;
            }
        }
    }

    .CommunitytabAddTowFour {
        width: 98%;
        height: 8vh;
        margin-left: 2%;

        .divTowFour {
            width: 95%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            input {
                border: none;
                outline: none;
                width: 74.2vw;
                height: 5vh;
                text-indent: 1em;
                border: 1px solid #ccc;
            }
        }
    }

    .CommunitytabAddTowFive {
        width: 98%;
        height: 18vh;
        margin-left: 2%;
        margin-top: 2vh;

        .divTowFive {
            width: 95%;
            height: 100%;
            display: flex;
            justify-content: space-around;

            .wbys {
                width: 75.5vw;
                height: 17vh;
                border: none;
                outline: none;
                text-indent: 1em;
                border: 1px solid #ccc;
            }
        }
    }

    .CommunitytabAddTowSix {
        width: 98%;
        height: 8vh;
        margin-left: 2%;

        button {
            width: 10vw;
            height: 6vh;
            background-color: #009688;
            border: none;
            cursor: pointer;
            color: #fff;
            border-radius: 2vw;
            margin-left: 4vw;
            line-height: 6vh;
            text-align: center;
            transition: opacity 0.5s ease;
        }

        button:hover {
            opacity: 0.8;
        }
    }
}

.tbodystatu {
    position: fixed;
    top: 40vh;
    left: 45vw;
    display: none;
}

.CommunitytabTow {
    width: 100%;
    height: 7.8vh;
    border-bottom: 2px solid #f5f5f5;
    cursor: pointer;

    .CommunitytabTowAdd {
        width: 9vw;
        height: 8vh;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1vw;
    }
}